<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="name" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="roleTable" lay-filter="roleTable"></table>
    </div>
</div>
<script id="roleTool" type="text/html">
    {{# if(d.status==0){ }}
    <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="authorize">授权</a>
    {{# }}}
</script>


<script id="addTableBar" type="text/html">
    <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </a>
    <!--<a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </a>-->
</script>
<script id="switchState" type="text/html">
    <input type="checkbox" name="status" value="{{d.status}}"
           lay-skin="switch" lay-text="是|否" lay-filter="checkState" {{d.status==0?"checked":""}} />
</script>

<script id="photo" type="text/html">
    {{# if(d.isUpdate==0){ }}
    <img src="/file/fc/showImg/{{d.photoPath}}" style="border-radius: 25px;width: 25px;height: 25px">
    {{# }}}
</script>

<script>
    var $,active;
    layui.use(['table','form','jquery','layer'],function(){
        var table = layui.table,layer = layui.layer,form = layui.form;
        $ = layui.jquery;

        //加载表格
        table.render({
            elem:'#roleTable',
            height:'full-160',
            page:true,
            toolbar:'#addTableBar',
            url:'/system/roc/find',
            cellMinWidth: 150,
            cols:[
                [
                    {type:'numbers',fixed:'left',align: 'center',title: '编号'},
                    {type:'checkbox',fixed:'left',align: 'center'},
                    {field:'name',title:'角色名称',width:200,sort:true,align: 'center'},
                    {field:'content',title:'角色描述',align: 'center'},
                    {field:'status',title:'是否可用',width:200,templet:'#switchState',align: 'center'},
                    {field:'createTime',title:'创建时间',width:300,align:'center'},
                    {fixed:'right',title:'操作',width:200,align:'center',toolbar:'#roleTool',align: 'center',},
                ],
            ]
        })

        //监听搜索按钮
        form.on('submit(searchBtn)',function(data){
            var dataForm = data.field;
            console.log(dataForm);
        })

        form.on('switch(switchState)',function (obj) {
            var status = obj.elem.checked?0:1;
            $.ajax({
                type:'post',
                url:'/system/roc/update',
                data:{
                    status:status
                },
                dataType:'json',
                success:function (result) {
                    layer.msg(result.msg);
                }
            })
        })



        active = {
            addOrUpdate:function (content) {
                var b = false;
                top.layer.open({
                    type:2,
                    content:content,
                    area:['700px','750px'],
                    btn:['确认修改','取消关闭'],
                    btn1:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function (i,o) {
                        if(b) layui.table.reload('roleTable');
                    }
                })
            },
            deleteConfirm:function (ids) {
                layer.confirm('确定删除该记录？',function (index) {
                    if (index>0){
                        $.ajax({
                            type:'post',
                            url:'/system/roc/delete',
                            data:{
                                id:ids
                            },
                            dataType:'json',
                            success:function (result) {
                                layer.msg(result.msg);
                                if (result.is){
                                    layui.table.reload('roleTable');
                                }
                            }
                        })
                    }
                });

            }
        }

        table.on('toolbar(roleTable)',function (obj) {
            var event = obj.event;
            if ("add"==event){
                active.addOrUpdate('/page/system/roleAdd');
            }
        })

        table.on('tool(roleTable)',function (obj) {
            var event = obj.event;
            if ("edit"==event){
                active.addOrUpdate('/page/system/roleEdit/'+obj.data.id);
            }
            else if ('delete' == event){
                var ids = obj.data.id;
                active.deleteConfirm(ids);
            }
        })


    });
</script>
</body>
</html>

